<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="enum" uri="http://www.daxia.com/enum" %>
<style>
	.memberlist .row {
		background:#fff;border-bottom:1px solid #ccc;padding:10px 0;margin-left:0px;
	}
</style>
<div id="wizard" style="width:70%;margin-top:20px;">
    <form id="designerform" action="form_wizard.html#" class="wizard-big">
       <h1>添加信息</h1>
       <fieldset style="position:relative;">
           <h5>个人信息</h5>
           <div class="row">
               <div class="col-sm-12">
                   <div class="form-group">
                       <label>手机号码 *</label>
                       <input id="mobile" name="mobile" type="text" class="form-control required" onblur="checkMobile(this)">
                   </div>	
                   <div class="form-group">
                       <label>真实姓名*</label>
                       <input id="user.realName" name="realName" type="text" class="form-control required">
                   </div>
                   <div class="form-group">
                       <label>性别 *</label>
                       ${enum:detail('Sex', 'sex', n.sex) }
                   </div>
                   <div class="form-group">
                       <label>年龄*</label>
                       <input id="age" name="age" type="number" class="form-control">
                   </div>
                   <div class="form-group">
                       <label>从业年限 *</label>
                       <input id="workAge" name="workAge" type="number" class="form-control">
                   </div>
                   <div class="form-group">
                       <label>所在公司*</label>
                       <select name="companyId" id="" class="form-control">
                       	<option value="">--无--</option>
                       	<c:forEach items="${companyList }" var="c">
                       	<option value="${c.id }">${c.name }</option>
                       	</c:forEach>
                       </select>
                   </div>
                   <div class="form-group">
                       <label>备注</label>
                       <input id="remark" name="remark" type="text" class="form-control">
                   </div>
               </div>
           </div>

       </fieldset>

       <!-- 
       <h1>待审核</h1>
       <fieldset>
           <div class="text-center" style="margin-top: 120px">
           		<i class="glyphicon glyphicon-ok" style="color:#1AB394;font-size:30px;"></i>
               <h2>提交资料并已缴费</h2>
               <h5>（审核需两天工作日）</h5>
           </div>
       </fieldset>
 -->
       <h1>完成</h1>
       <fieldset>
       		<div class="text-center" style="margin-top: 120px">
	           <i class="glyphicon glyphicon-ok" style="color:#1AB394;font-size:30px;"></i>
	           <h2>完成！</h2>
           </div>
       </fieldset>
   </form>
</div>
<script>
	function checkMobile(input) {
		var mobile = $(input).val();
		if (mobile == '') {
			error('请输入手机号码');
			return;
		}
		$.ajax({
			url: "${ctx}/user/checkMobile?mobile=" + mobile,
			dataType: "json",
			success: function(data) {
				if (!data.success) {
					error(data.msg);
					$(input).val('');
				}
			}
		});
	}

function selectProvince(_this){
	var $this = $(_this);
	var designerProvinceId = $this.val();
	$('#designerCityId').html('');
	$('#designerDistrictId').html('');
	if (designerProvinceId != '') {
		$.ajax({
			url: "${ctx}/admin/province/findArea?provinceId=" + designerProvinceId,
			dataType: "json",
			success: function(array) {
				$('#designerCityId').append('<option value="">城市</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#designerCityId').append(option);	
				}
			}
		});
	}
}
function selectCity(_this) {
	var $this = $(_this);
	var designerCityId = $this.val();
	$('#designerDistrictId').html('');
	if (designerCityId != '') {
		$.ajax({
			url: "${ctx}/admin/province/findArea?cityId=" + designerCityId,
			dataType: "json",
			success: function(array) {
				$('#designerDistrictId').append('<option value="">地区</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#designerDistrictId').append(option);	
				}
			}
		});
	}
}

$(document).ready(function() {
	init_images('image');
});


$("#designerform").steps({
    bodyTag: "fieldset",
    onStepChanging: function (event, currentIndex, newIndex) {
        if (currentIndex > newIndex) {
            return true;
        }
		var form = $(this);
        if (currentIndex < newIndex) {
            $(".body:eq(" + newIndex + ") label.error", form).remove();
            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        var valid = form.valid();
        var designerProvinceId = $('#designerProvinceId').val();
        var designerCityId = $('#designerCityId').val();
        var designerDistrictId = $('#designerDistrictId').val();
        /*if(!!!designerProvinceId || !!!designerCityId || !!!designerDistrictId) {
        	alert('valid:' + valid)
        	valid = false;
        	var name = !!!designerProvinceId ? '省份' : '';
        	name = !!!designerCityId ? '城市' : name;
        	name = !!!designerDistrictId ? '区县' : name;
        	var label = $('.companylabel');
        	var errorEl = '<label id="username-error" class="error" for="username"><i class="fa fa-times-circle"></i>  必选' + name + '</label>';
        	errorEl.insertAfter(label);
        } */
        var result = false;
        //if(!!valid && valid != 'false' && currentIndex == 0) {
        	//保存数据
        	var params = $('#designerform').serialize();
        	$.ajax({
    			url: "${ctx}/admin/user/designerSave",
    			dataType: 'json',
    			data : params,
    			async: false,
    			success: function(data) {
    				if(!!!data.success) {
    					result = false;
    					error(data.msg);
    				} else {
    					result = true;
    				}
    			}
    		}); 
        //}
        return result;
    },
    onStepChanged: function (event, currentIndex, priorIndex) {
        /* if (currentIndex === 2 && Number($("#age").val()) >= 18) {
            $(this).steps("next");
        }

        // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
        if (currentIndex === 2 && priorIndex === 3) {
            $(this).steps("previous");
        }  */
    },
    onFinishing: function (event, currentIndex) {
        /* var form = $(this);

        // Disable validation on fields that are disabled.
        // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
        form.validate().settings.ignore = ":disabled";

        // Start validation; Prevent form submission if false
        return form.valid(); */
    },
    onFinished: function (event, currentIndex) {
        /* var form = $(this);

        // Submit form input
        form.submit(); */
    }
}).validate({
    errorPlacement: function (error, element) {
        element.before(error);
    },
    rules: {
        confirm: {
            equalTo: "#password"
        }
    }
});

</script>